<template>
  <div class="mobileStep3">
    <h1>平台帮你解决</h1>
    <h2>礼品（赠品）采购与发货</h2>
    <ul class="box">
      <li>
        <h6>绝对安全</h6>
        <div class="content">
          <span>
            <i class="taobaoIcon"></i>菜鸟面单发货
          </span>
          <span>
            <i class="jingdongIcon"></i>无界面单发货
          </span>
        </div>
      </li>
      <li>
        <h6>绝对方便</h6>
        <div class="content">
          <span>下单：系统智能筛选</span>
          <span>发货：批量发货</span>
        </div>
      </li>
      <li>
        <h6>绝对低价</h6>
        <div class="content">
          <span>承诺快递比你现在的更低</span>
          <span>同样的礼品比你现有的更低</span>
        </div>
      </li>
    </ul>
    <img class="backgroundImg" :src="h5_3" alt="bg3">
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'mobileStep3',
  data () {
    return {
      h5_3: require('@/assets/images/mobile/h5_3.png')
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.mobileStep3
  transition all 0.6s
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  overflow hidden
  box-sizing border-box
  .backgroundImg
    position absolute
    bottom 0
    right 0
    left 0
    margin 0 auto
    min-width 100%
    height 100%
    z-index -1
  h1, h2
    padding-left 8rem
    font-size 1.9rem
    line-height 2.6rem
    color #ffffff
  h1
    margin-top 2.6rem
  h2
    margin-bottom 3rem
  .box
    display flex
    justify-content space-around
    align-items center
    flex-wrap wrap
    li
      margin-bottom 1.7rem
      border-radius 5px
      overflow hidden
      h6
        height 3rem
        line-height 3rem
        font-size 1.5rem
        color #ffffff
        text-align center
        background #B02954
      .content
        background #ffffff
        display flex
        flex-direction column
        justify-content center
        // align-items center
        padding 1rem 1.6rem
        span
          font-size 1.3rem
          line-height 1.8rem
          color #333333
          display inline-flex
          align-items center
          margin-bottom 0.8rem
          i
            // display inline-block
            width 1.8rem
            height 1.8rem
            margin-right 0.9rem
            vertical-align middle
          .taobaoIcon
            background url('../../../assets/images/taobao.png') no-repeat
            background-size 100% 100%
          .jingdongIcon
            background url('../../../assets/images/jd.png') no-repeat
            background-size 100% 100%
</style>
